<template>
  <view class="u-flex-col u-row-center u-col-center">
    <view class="u-flex-col gxcent">
      <view v-for="(item,index) in list" :key="index"
            class="u-margin-top-20 u-border-ra20 u-bg-white u-flex border-bootom-1"
            @click="tiao('/pages/appointment/appointment?id=' + item.id)">
        <image :src="item.image" style="width: 200rpx;height: 200rpx;border-radius: 20rpx;"></image>
        <view class="u-flex-col u-margin-left-20 clix u-row-between" style="width: 300rpx;">
          <text class="u-font-32 u-color-balck3">{{ item.title }}</text>
          <text class="u-font-26 u-color-balck6 u-margin-top-10">售价：￥{{ item.price }}</text>
          <text class="u-font-26 u-color-balck6 u-margin-top-10">今日预约单：{{ item.todayAppointmentNumber }}</text>
        </view>
        <view class="lxbtn">
          <text class="u-font-26 zhuti_color" style="color: #19be6b;">立即预约</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {listRobot} from "@/api/qd/robot";
import config from "@/config";

export default {
  computed: {
    config() {
      return config
    }
  },
  data() {
    return {
      title: 'Hello',
      list: [],
    }
  },
  onShow() {
    this.getData();
  },
  methods: {
    tiao(url) {
      uni.navigateTo({url: url})
    },
    getData() {
      listRobot().then((res) => {
        this.list = res.data;
        this.list.forEach((item) => {
          item.image = config.baseUrl + item.image;
        })
      })
    }
  }
}
</script>

<style>
@import "@/static/scss/u-ui.css";

page {
  background-color: #F6F6F6;
}

.gxcent {
  width: 710rpx;
}

.lxbtn {
  width: 140rpx;
  height: 78rpx;
  border: 1rpx solid #19be6b;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
}
</style>